/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
var map, marker, clusterGroup, coorx, coory;
//rajouter icone sans fond
function changeMenu() {
    $('body').css('background-color', '#266699');
    $('.navbar-fixed-top').css('background-color', '#266699')
            .css('border', '0px').css('color', 'grey').css('height', '80px');
    $('.navbar-brand').css('padding', '0px 0px').css('height', '100px');
    /*$('.search-query').css('margin-top', '50px')
     .css('background-color', '#151C24')
     .css('border-color', '#266699');*/

    $('.nav navbar-nav navbar-right').css('background-color', '#266699')
            .css('position', 'relative')
            .css('color', 'grey')
            .css('margin-top', '12px');
    $('.well').css('background-color', '#266699').css('border', '0px');
    $('.dropdown-menu').css('background-color', '#2C3E4E')
            .css('position', 'absolute')
            .css('color', 'grey')
            .css('top', '44px')
            .css('left', '1400px');
    $('a').css('color', 'grey');
    $('.thumbnails').css('position', 'relative').css('width', '350px')
            .css('left', '1300px').css('background-color', 'grey')
            .css('display', 'block').css('margin-top', '50px')
            .css('z-index', '2').css('position', 'absolute')
            .css('margin-left', '250px');
    $('.map').css('border', '2px solid white').css('margin-top', '50px')
            .css('z-index', '1').css('position', 'relative');
}

function afficheInfo()
{
    $('.thumbnails').css('display', 'block');
}

//Affichage de la carte
function loadMap()
{
    L.mapbox.accessToken = 'pk.eyJ1IjoibmluYW5vdW4iLCJhIjoiSkN4dndmTSJ9.6plStO7M5AuAbDa6O1m54A';
    map = L.mapbox.map('map', 'examples.map-i86nkdio') //examples.map-i86nkdio
            .setView([0, 0], 3);
    
    //Cluster de marqueurs
    clusterGroup = new L.MarkerClusterGroup({animateAddingMarkers: true});
    map.addLayer(clusterGroup);
    marker = "";
    document.getElementById('noneToggle').checked = true;
}

function changeHisto()
{
    var texte = $('#histo').text();
    alert(texte);
    $('#histo').html('<textarea>' + texte + '</textarea>');
    $('#validate-btn').attr('disabled', false).attr('class', '');
}

//Glorious
function toggleControl(element) {
    if (element.value == "point" && element.checked == true) {
        placer();
    }
    if (element.value == "valider") {
        ajouter();
    }
    if (element.value == "naviguer") {
        supprimer();
    }
}


//Ajout du stade
function placer() {
    alert('Place ton stade');
    map.on('click', function (e) {
        //Affichage dynamique des coordonnées du marqueur placé
        document.getElementById('nav_coorx').value = e.latlng.lat;
        document.getElementById('nav_coory').value = e.latlng.lng;
        marker = L.marker([e.latlng.lat, e.latlng.lng], {
            /*icon: L.icon({
             iconUrl: 'msc.png',
             iconSize: [100, 80]
             }),*/
            draggable: false
        });
        marker.addTo(map);
        //
        marker.dragging.enable();
        marker.on('drag', function () {
            //Affichage dynamique des coordonnées du marqueur placé
            document.getElementById('nav_coorx').value = marker.getLatLng().lat;
            document.getElementById('nav_coory').value = marker.getLatLng().lng;
        });
        map.off('click');
        clusterGroup.addLayer(marker);
    });
}

function ajouter() {
    if (document.getElementById('stadeToggle').value != "" && document.getElementById('pointToggle').checked == true && marker != "") {

        //Ajout de l'evenement lors du click
        marker.on('click', function (e) {
            document.getElementById('coorx').value = e.latlng.lat;
            document.getElementById('coory').value = e.latlng.lat;
            document.forms['currentStade'].submit();
        });

        //Formulaire de creation du stade
        document.getElementById('StadeCoorxSTADE').value = marker.getLatLng().lat;
        document.getElementById('StadeCoorySTADE').value = marker.getLatLng().lng;
        document.getElementById('StadeNomSTADE').value = document.getElementById('stadeToggle').value;
        document.forms['StadeCreationForm'].submit(); // soumission du formulaire


        //"Reinitialisation" des variables
        marker.dragging.disable();
        document.getElementById('stadeToggle').value = "";
        marker = "";
        document.getElementById('nav_coorx').value = "";
        document.getElementById('nav_coory').value = "";
        document.getElementById('noneToggle').checked = true;
    }
    else {
        alert("Veuillez saisir un nom pour le stade ou le placer");
    }
}

//Annulation de l'ajout d'un marqueur
function supprimer() {
    if (marker != "") {
        marker.dragging.disable();
        document.getElementById('stadeToggle').value = "";
        document.getElementById('coorx').value = 0;
        document.getElementById('coory').value = 0;
        if (map.hasLayer(marker)) {
            map.removeLayer(marker);
        }
        if (clusterGroup.hasLayer(marker)) {
            clusterGroup.removeLayer(marker);
        }
        marker = "";
        coorx = "";
        coory = "";
    }
}

//Affichage des marqueurs de la base de données
function dessiner(liste) {
    for (var i = 0; i < liste.length; i++) {
        marker = L.marker([liste[i]['Stade']['coorx_STADE'], liste[i]['Stade']['coory_STADE']], {
           /*icon: L.icon({
                iconUrl: 'msc.png',
                iconSize: [100, 80]
            }),*/
            title : liste[i]['Stade']['nom_STADE'], //Affichage du nom du stade lors du survol
            draggable: false //Une fois validé, le marqueur ne peut plus etre replacé
        });
        marker.addTo(map);
        clusterGroup.addLayer(marker);
        marker.on('click', function (e) {
            document.getElementById('coorx').value = e.latlng.lat;
            document.getElementById('coory').value = e.latlng.lng;
            document.forms['currentStade'].submit(); //Formulaire pour afficher la page d'un stade
        });
    }

}
